<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    label-width="100px"
  >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="formData.contactName" placeholder="请输入联系人姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入联系电话" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="gender">
          <el-select v-model="formData.gender" placeholder="请选择性别">
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入电子邮箱" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="微信号" prop="wechat">
          <el-input v-model="formData.wechat" placeholder="请输入微信号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="QQ号码" prop="qq">
          <el-input v-model="formData.qq" placeholder="请输入QQ号码" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="首要联系人" prop="isPrimary">
          <el-select v-model="formData.isPrimary" placeholder="请选择是否首要联系人">
            <el-option
              v-for="dict in getIntDictOptions(DICT_TYPE.OA_IS_OR_NO)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { CustomerContactFormVO } from '@/api/oa/customer'

defineOptions({ name: 'ContactPersonForm' })

const props = defineProps<{
  modelValue: CustomerContactFormVO
}>()

const emit = defineEmits(['update:modelValue'])

const formRef = ref()
const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const formRules = {
  contactName: [{ required: true, message: '联系人姓名不能为空', trigger: 'blur' }],
  phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
  gender: [{ required: true, message: '性别不能为空', trigger: 'change' }],
  isPrimary: [{ required: true, message: '是否首要联系人不能为空', trigger: 'change' }]
}

/** 表单校验 */
const validate = async () => {
  if (!formRef.value) return
  return await formRef.value.validate()
}

/** 重置表单 */
const resetForm = () => {
  formRef.value?.resetFields()
}

defineExpose({
  validate,
  resetForm
})
</script> 